<template>
    <div class="technical-questions-container">
      <div class="header">
        <h1><i class="fas fa-laptop-code"></i> 专业技术题库+训练</h1>
        <p class="subtitle">按职位分类的专业技术题目和实战训练</p>
      </div>
  
      <!-- 技术方向选择 -->
      <div class="tech-categories">
        <div 
          v-for="category in techCategories" 
          :key="category.id"
          class="tech-category-card"
          :class="{ active: selectedCategory === category.id }"
          @click="selectCategory(category.id)"
        >
          <div class="category-icon">
            <i :class="category.icon"></i>
          </div>
          <h3>{{ category.name }}</h3>
          <p>{{ category.description }}</p>
          <span class="question-count">{{ category.count }}题</span>
        </div>
      </div>
  
      <!-- 筛选和搜索区域 -->
      <div class="filter-section">
        <div class="search-box">
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索技术题目..."
            @input="filterQuestions"
          >
          <i class="fas fa-search"></i>
        </div>
  
        <div class="filter-options">
          <div class="filter-group">
            <label>难度:</label>
            <select v-model="selectedDifficulty" @change="filterQuestions">
              <option value="">全部</option>
              <option value="初级">初级</option>
              <option value="中级">中级</option>
              <option value="高级">高级</option>
            </select>
          </div>
  
          <div class="filter-group">
            <label>题型:</label>
            <select v-model="selectedQuestionType" @change="filterQuestions">
              <option value="">全部</option>
              <option value="选择题">选择题</option>
              <option value="编程题">编程题</option>
              <option value="问答题">问答题</option>
              <option value="系统设计">系统设计</option>
            </select>
          </div>
  
          <div class="filter-group">
            <label>排序:</label>
            <select v-model="selectedSort" @change="sortQuestions">
              <option value="default">默认</option>
              <option value="difficulty-asc">难度升序</option>
              <option value="difficulty-desc">难度降序</option>
              <option value="popularity-desc">热度降序</option>
            </select>
          </div>
        </div>
      </div>
  
      <!-- 题目列表 -->
      <div class="questions-container">
        <div class="questions-header">
          <h2>{{ selectedCategoryName }}题目</h2>
          <div class="view-mode">
            <button 
              :class="{ active: viewMode === 'list' }"
              @click="viewMode = 'list'"
            >
              <i class="fas fa-list"></i> 列表视图
            </button>
            <button 
              :class="{ active: viewMode === 'card' }"
              @click="viewMode = 'card'"
            >
              <i class="fas fa-th-large"></i> 卡片视图
            </button>
          </div>
        </div>
  
        <!-- 列表视图 -->
        <div v-if="viewMode === 'list'" class="questions-list">
          <div 
            v-for="(question, index) in filteredQuestions" 
            :key="index"
            class="question-item"
            @click="openQuestionDetail(question)"
          >
            <div class="question-meta">
              <span class="question-type">{{ question.type }}</span>
              <span class="question-difficulty" :class="getDifficultyClass(question.difficulty)">
                {{ question.difficulty }}
              </span>
            </div>
            <h3 class="question-title">{{ question.title }}</h3>
            <div class="question-tags">
              <span v-for="(tag, i) in question.tags" :key="i" class="tag">{{ tag }}</span>
            </div>
            <div class="question-footer">
              <span><i class="fas fa-fire"></i> 热度: {{ question.popularity }}</span>
              <span><i class="fas fa-clock"></i> {{ question.timeRequired }}分钟</span>
            </div>
          </div>
        </div>
  
        <!-- 卡片视图 -->
        <div v-if="viewMode === 'card'" class="questions-grid">
          <div 
            v-for="(question, index) in filteredQuestions" 
            :key="index"
            class="question-card"
            @click="openQuestionDetail(question)"
          >
            <div class="card-header">
              <span class="question-type">{{ question.type }}</span>
              <span class="question-difficulty" :class="getDifficultyClass(question.difficulty)">
                {{ question.difficulty }}
              </span>
            </div>
            <h3 class="question-title">{{ question.title }}</h3>
            <div class="question-tags">
              <span v-for="(tag, i) in question.tags" :key="i" class="tag">{{ tag }}</span>
            </div>
            <div class="card-footer">
              <span><i class="fas fa-fire"></i> {{ question.popularity }}</span>
              <span><i class="fas fa-clock"></i> {{ question.timeRequired }}分钟</span>
            </div>
          </div>
        </div>
  
        <!-- 无结果提示 -->
        <div v-if="filteredQuestions.length === 0" class="no-results">
          <i class="fas fa-search"></i>
          <p>没有找到匹配的题目</p>
          <button @click="resetFilters">重置筛选条件</button>
        </div>
  
        <!-- 分页控件 -->
        <div v-if="filteredQuestions.length > 0" class="pagination">
          <button 
            v-for="page in totalPages" 
            :key="page"
            :class="{ active: currentPage === page }"
            @click="goToPage(page)"
          >
            {{ page }}
          </button>
        </div>
      </div>
  
      <!-- 题目详情模态框 -->
      <div v-if="selectedQuestion" class="question-modal" @click.self="closeModal">
        <div class="modal-content">
          <button class="close-btn" @click="closeModal">
            <i class="fas fa-times"></i>
          </button>
  
          <div class="modal-header">
            <div class="question-meta">
              <span class="question-type">{{ selectedQuestion.type }}</span>
              <span class="question-difficulty" :class="getDifficultyClass(selectedQuestion.difficulty)">
                {{ selectedQuestion.difficulty }}
              </span>
            </div>
            <h2>{{ selectedQuestion.title }}</h2>
            <div class="question-tags">
              <span v-for="(tag, i) in selectedQuestion.tags" :key="i" class="tag">{{ tag }}</span>
            </div>
          </div>
  
          <div class="modal-body">
            <div class="question-description">
              <h3>题目描述</h3>
              <div v-html="selectedQuestion.description"></div>
            </div>
  
            <!-- 选择题 -->
            <div v-if="selectedQuestion.type === '选择题'" class="question-options">
              <div 
                v-for="(option, index) in selectedQuestion.options" 
                :key="index"
                class="option"
                :class="{
                  selected: selectedOption === index,
                  correct: showAnswer && index === selectedQuestion.answer,
                  wrong: showAnswer && selectedOption === index && index !== selectedQuestion.answer
                }"
                @click="selectOption(index)"
              >
                <span class="option-letter">{{ String.fromCharCode(65 + index) }}.</span>
                <div v-html="option"></div>
              </div>
            </div>
  
            <!-- 编程题 -->
            <div v-if="selectedQuestion.type === '编程题'" class="coding-section">
              <div class="code-editor">
                <textarea 
                  v-model="userCode" 
                  placeholder="在这里编写你的代码..."
                  spellcheck="false"
                ></textarea>
                <select v-model="selectedLanguage">
                  <option v-for="lang in programmingLanguages" :value="lang" :key="lang">
                    {{ lang }}
                  </option>
                </select>
              </div>
              <button class="run-code-btn" @click="runCode">
                <i class="fas fa-play"></i> 运行代码
              </button>
            </div>
  
            <!-- 问答题 -->
            <div v-if="selectedQuestion.type === '问答题'" class="essay-section">
              <textarea 
                v-model="userAnswer" 
                placeholder="在这里输入你的回答..."
                rows="6"
              ></textarea>
            </div>
  
            <!-- 系统设计题 -->
            <div v-if="selectedQuestion.type === '系统设计'" class="system-design-section">
              <div class="design-tools">
                <button @click="toggleWhiteboard">
                  <i class="fas fa-chalkboard"></i> {{ showWhiteboard ? '隐藏' : '显示' }}白板
                </button>
                <button @click="toggleDiagram">
                  <i class="fas fa-project-diagram"></i> {{ showDiagram ? '隐藏' : '显示' }}架构图
                </button>
              </div>
              
              <div v-if="showWhiteboard" class="whiteboard">
                <div class="whiteboard-toolbar">
                  <button @click="currentTool = 'pen'"><i class="fas fa-pen"></i> 画笔</button>
                  <button @click="currentTool = 'text'"><i class="fas fa-font"></i> 文本</button>
                  <button @click="currentTool = 'shape'"><i class="fas fa-square"></i> 形状</button>
                  <button @click="clearWhiteboard"><i class="fas fa-trash"></i> 清空</button>
                </div>
                <canvas ref="whiteboardCanvas"></canvas>
              </div>
  
              <div v-if="showDiagram" class="diagram-area">
                <textarea 
                  v-model="systemDesignText" 
                  placeholder="在这里描述你的系统设计..."
                  rows="6"
                ></textarea>
              </div>
            </div>
  
            <div class="action-buttons">
              <button v-if="!showAnswer" class="show-answer-btn" @click="showAnswer = true">
                <i class="fas fa-lightbulb"></i> 显示答案
              </button>
              <button class="save-btn" @click="saveProgress">
                <i class="fas fa-save"></i> 保存进度
              </button>
              <button class="practice-btn" @click="startPracticeMode">
                <i class="fas fa-dumbbell"></i> 练习模式
              </button>
            </div>
  
            <div v-if="showAnswer" class="answer-section">
              <h3>参考答案</h3>
              <div class="answer-content" v-html="selectedQuestion.answerExplanation"></div>
              
              <div v-if="selectedQuestion.type === '编程题'" class="sample-code">
                <h4>示例代码</h4>
                <pre><code>{{ selectedQuestion.sampleCode }}</code></pre>
              </div>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 练习模式模态框 -->
      <div v-if="practiceMode" class="practice-modal" @click.self="closePracticeMode">
        <div class="practice-content">
          <button class="close-btn" @click="closePracticeMode">
            <i class="fas fa-times"></i>
          </button>
          
          <h2>练习模式: {{ practiceQuestion.title }}</h2>
          <div class="timer">
            <i class="fas fa-stopwatch"></i> 
            {{ formatTime(practiceTime) }}
          </div>
  
          <div class="practice-question">
            <div v-html="practiceQuestion.description"></div>
          </div>
  
          <div class="practice-answer-area">
            <!-- 根据题型显示不同的答题区域 -->
            <div v-if="practiceQuestion.type === '选择题'" class="practice-options">
              <div 
                v-for="(option, index) in practiceQuestion.options" 
                :key="index"
                class="option"
                :class="{ selected: practiceSelectedOption === index }"
                @click="practiceSelectedOption = index"
              >
                <span class="option-letter">{{ String.fromCharCode(65 + index) }}.</span>
                <div v-html="option"></div>
              </div>
            </div>
  
            <div v-if="practiceQuestion.type === '编程题'" class="practice-code-editor">
              <textarea 
                v-model="practiceUserCode" 
                placeholder="在这里编写你的代码..."
                spellcheck="false"
              ></textarea>
              <select v-model="practiceSelectedLanguage">
                <option v-for="lang in programmingLanguages" :value="lang" :key="lang">
                  {{ lang }}
                </option>
              </select>
            </div>
  
            <div v-if="practiceQuestion.type === '问答题'" class="practice-essay">
              <textarea 
                v-model="practiceUserAnswer" 
                placeholder="在这里输入你的回答..."
                rows="6"
              ></textarea>
            </div>
  
            <div v-if="practiceQuestion.type === '系统设计'" class="practice-system-design">
              <textarea 
                v-model="practiceSystemDesign" 
                placeholder="在这里描述你的系统设计..."
                rows="6"
              ></textarea>
            </div>
          </div>
  
          <div class="practice-actions">
            <button class="submit-btn" @click="submitPractice">
              <i class="fas fa-paper-plane"></i> 提交答案
            </button>
            <button class="hint-btn" @click="showPracticeHint">
              <i class="fas fa-question-circle"></i> 提示
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'TechnicalQuestions',
    data() {
      return {
        selectedCategory: 'frontend',
        searchQuery: '',
        selectedDifficulty: '',
        selectedQuestionType: '',
        selectedSort: 'default',
        viewMode: 'list',
        currentPage: 1,
        itemsPerPage: 10,
        selectedQuestion: null,
        showAnswer: false,
        selectedOption: null,
        userCode: '',
        selectedLanguage: 'JavaScript',
        userAnswer: '',
        showWhiteboard: false,
        showDiagram: false,
        currentTool: 'pen',
        systemDesignText: '',
        practiceMode: false,
        practiceQuestion: null,
        practiceTime: 0,
        practiceTimer: null,
        practiceSelectedOption: null,
        practiceUserCode: '',
        practiceSelectedLanguage: 'JavaScript',
        practiceUserAnswer: '',
        practiceSystemDesign: '',
        showPracticeHint: false,
        techCategories: [
          {
            id: 'frontend',
            name: '前端开发',
            icon: 'fas fa-code',
            description: 'HTML, CSS, JavaScript及相关框架',
            count: 128
          },
          {
            id: 'backend',
            name: '后端开发',
            icon: 'fas fa-server',
            description: '服务器、数据库和API开发',
            count: 156
          },
          {
            id: 'mobile',
            name: '移动开发',
            icon: 'fas fa-mobile-alt',
            description: 'iOS和Android应用开发',
            count: 87
          },
          {
            id: 'data',
            name: '数据科学',
            icon: 'fas fa-database',
            description: '数据分析与机器学习',
            count: 112
          },
          {
            id: 'devops',
            name: 'DevOps',
            icon: 'fas fa-cloud',
            description: '部署、监控和自动化',
            count: 76
          },
          {
            id: 'qa',
            name: '测试工程师',
            icon: 'fas fa-vial',
            description: '质量保证与测试',
            count: 53
          }
        ],
        programmingLanguages: [
          'JavaScript',
          'Python',
          'Java',
          'C++',
          'C#',
          'PHP',
          'Ruby',
          'Go',
          'Swift',
          'Kotlin'
        ],
        questions: [
          {
            id: 1,
            category: 'frontend',
            title: 'React组件生命周期方法',
            type: '选择题',
            difficulty: '中级',
            description: '在React类组件中，以下哪个生命周期方法在组件即将从DOM中移除时调用？',
            options: [
              'componentWillUnmount()',
              'componentDidMount()',
              'componentWillUpdate()',
              'shouldComponentUpdate()'
            ],
            answer: 0,
            answerExplanation: 'componentWillUnmount()是React组件生命周期中的一个方法，它在组件即将被卸载和销毁时调用。这是执行任何必要清理的好地方，例如取消网络请求，或清除在componentDidMount()中创建的计时器。',
            tags: ['React', '前端', '生命周期'],
            popularity: 4.5,
            timeRequired: 5
          },
          {
            id: 2,
            category: 'backend',
            title: 'RESTful API设计',
            type: '问答题',
            difficulty: '高级',
            description: '请解释RESTful API设计的最佳实践，包括资源命名、HTTP方法使用和状态码返回。',
            answerExplanation: 'RESTful API设计的最佳实践包括：<br><br>1. 使用名词而非动词命名资源（如/users而非/getUsers）<br>2. 正确使用HTTP方法：GET（获取）、POST（创建）、PUT（全量更新）、PATCH（部分更新）、DELETE（删除）<br>3. 使用适当的HTTP状态码：200（成功）、201（创建成功）、400（客户端错误）、401（未授权）、404（未找到）、500（服务器错误）<br>4. 使用HATEOAS原则使API可发现<br>5. 版本化API（如/v1/users）<br>6. 使用过滤、排序和分页处理大量数据',
            tags: ['API', '后端', '设计'],
            popularity: 4.2,
            timeRequired: 15
          },
          {
            id: 3,
            category: 'data',
            title: 'Python数据处理',
            type: '编程题',
            difficulty: '中级',
            description: '给定一个Pandas DataFrame，包含"name"、"age"和"salary"列，编写代码找出年龄大于30且薪水高于50000的所有员工。',
            sampleCode: `import pandas as pd
  
  # 假设df是输入的DataFrame
  result = df[(df['age'] > 30) & (df['salary'] > 50000)]`,
            answerExplanation: '这个问题考察Pandas的条件筛选能力。解决方案是使用布尔索引，通过组合两个条件来筛选DataFrame。注意使用括号确保运算顺序正确，并使用&运算符而不是and关键字。',
            tags: ['Python', 'Pandas', '数据分析'],
            popularity: 4.0,
            timeRequired: 10
          },
          {
            id: 4,
            category: 'devops',
            title: 'Docker容器网络',
            type: '选择题',
            difficulty: '高级',
            description: '在Docker中，以下哪种网络模式允许容器直接使用宿主机的网络栈？',
            options: [
              'host模式',
              'bridge模式',
              'none模式',
              'overlay模式'
            ],
            answer: 0,
            answerExplanation: 'Docker的host网络模式允许容器直接使用宿主机的网络栈，容器不会虚拟出自己的网卡，而是直接使用宿主机的IP和端口。这种模式的性能最好，但牺牲了一定的隔离性。',
            tags: ['Docker', 'DevOps', '容器'],
            popularity: 3.8,
            timeRequired: 5
          },
          {
            id: 5,
            category: 'mobile',
            title: 'Android Activity生命周期',
            type: '选择题',
            difficulty: '初级',
            description: '在Android中，当Activity首次创建时会调用哪个方法？',
            options: [
              'onCreate()',
              'onStart()',
              'onResume()',
              'onRestart()'
            ],
            answer: 0,
            answerExplanation: 'onCreate()是Activity生命周期中第一个被调用的方法，它在Activity首次创建时调用。在这个方法中通常完成一些初始化工作，如设置布局、绑定数据等。',
            tags: ['Android', '移动开发', 'Activity'],
            popularity: 3.5,
            timeRequired: 5
          },
          {
            id: 6,
            category: 'frontend',
            title: 'CSS Flexbox布局',
            type: '问答题',
            difficulty: '初级',
            description: '解释CSS Flexbox布局中justify-content和align-items属性的区别，并举例说明它们的用法。',
            answerExplanation: 'justify-content和align-items都是Flexbox布局中的重要属性，但控制的方向不同：<br><br>1. justify-content控制主轴（main axis）上的对齐方式，常用值有：flex-start（默认）、flex-end、center、space-between、space-around<br>2. align-items控制交叉轴（cross axis）上的对齐方式，常用值有：stretch（默认）、flex-start、flex-end、center、baseline<br><br>例如：<br>.container {<br>  display: flex;<br>  justify-content: center; /* 水平居中 */<br>  align-items: center; /* 垂直居中 */<br>}',
            tags: ['CSS', '前端', '布局'],
            popularity: 4.1,
            timeRequired: 10
          },
          {
            id: 7,
            category: 'backend',
            title: '数据库索引优化',
            type: '系统设计',
            difficulty: '高级',
            description: '设计一个高性能的用户查询系统，要求能够快速查询上亿用户数据。请描述你将如何设计数据库表和索引。',
            answerExplanation: '设计高性能的用户查询系统需要考虑以下几点：<br><br>1. 数据库选择：考虑使用分库分表的MySQL或专门的NoSQL解决方案如MongoDB<br>2. 索引设计：<br>   - 主键使用自增ID或UUID<br>   - 为常用查询字段创建复合索引<br>   - 避免过度索引，因为索引会降低写入性能<br>3. 缓存层：引入Redis缓存热点数据<br>4. 读写分离：将读操作分流到从库<br>5. 分片策略：根据用户ID或地区进行数据分片<br>6. 考虑使用Elasticsearch支持复杂搜索',
            tags: ['数据库', '性能优化', '系统设计'],
            popularity: 4.3,
            timeRequired: 20
          }
        ]
      }
    },
    computed: {
      selectedCategoryName() {
        const category = this.techCategories.find(c => c.id === this.selectedCategory)
        return category ? category.name : '全部'
      },
      filteredQuestions() {
        let questions = this.questions.filter(q => q.category === this.selectedCategory)
        
        if (this.searchQuery) {
          const query = this.searchQuery.toLowerCase()
          questions = questions.filter(q => 
            q.title.toLowerCase().includes(query) || 
            q.description.toLowerCase().includes(query) ||
            (q.tags && q.tags.some(tag => tag.toLowerCase().includes(query)))
          )
        }
        
        if (this.selectedDifficulty) {
          questions = questions.filter(q => q.difficulty === this.selectedDifficulty)
        }
        
        if (this.selectedQuestionType) {
          questions = questions.filter(q => q.type === this.selectedQuestionType)
        }
        
        return questions
      },
      totalPages() {
        return Math.ceil(this.filteredQuestions.length / this.itemsPerPage)
      },
      paginatedQuestions() {
        const start = (this.currentPage - 1) * this.itemsPerPage
        const end = start + this.itemsPerPage
        return this.filteredQuestions.slice(start, end)
      }
    },
    methods: {
      selectCategory(categoryId) {
        this.selectedCategory = categoryId
        this.currentPage = 1
      },
      filterQuestions() {
        this.currentPage = 1
      },
      sortQuestions() {
        if (this.selectedSort === 'difficulty-asc') {
          this.filteredQuestions.sort((a, b) => this.getDifficultyValue(a.difficulty) - this.getDifficultyValue(b.difficulty))
        } else if (this.selectedSort === 'difficulty-desc') {
          this.filteredQuestions.sort((a, b) => this.getDifficultyValue(b.difficulty) - this.getDifficultyValue(a.difficulty))
        } else if (this.selectedSort === 'popularity-desc') {
          this.filteredQuestions.sort((a, b) => b.popularity - a.popularity)
        }
      },
      getDifficultyValue(difficulty) {
        switch(difficulty) {
          case '初级': return 1
          case '中级': return 2
          case '高级': return 3
          default: return 0
        }
      },
      getDifficultyClass(difficulty) {
        return {
          'easy': difficulty === '初级',
          'medium': difficulty === '中级',
          'hard': difficulty === '高级'
        }
      },
      goToPage(page) {
        this.currentPage = page
        window.scrollTo({ top: 0, behavior: 'smooth' })
      },
      resetFilters() {
        this.searchQuery = ''
        this.selectedDifficulty = ''
        this.selectedQuestionType = ''
        this.selectedSort = 'default'
        this.currentPage = 1
      },
      openQuestionDetail(question) {
        this.selectedQuestion = question
        this.selectedOption = null
        this.showAnswer = false
        this.userCode = ''
        this.userAnswer = ''
        document.body.style.overflow = 'hidden'
      },
      closeModal() {
        this.selectedQuestion = null
        document.body.style.overflow = 'auto'
      },
      selectOption(index) {
        if (!this.showAnswer) {
          this.selectedOption = index
        }
      },
      runCode() {
        alert('代码运行功能需要后端支持，此处仅为演示')
      },
      toggleWhiteboard() {
        this.showWhiteboard = !this.showWhiteboard
      },
      toggleDiagram() {
        this.showDiagram = !this.showDiagram
      },
      clearWhiteboard() {
        // 实际实现需要操作canvas
        alert('白板已清空')
      },
      saveProgress() {
        alert('进度已保存')
      },
      startPracticeMode() {
        this.practiceMode = true
        this.practiceQuestion = this.selectedQuestion
        this.practiceTime = 0
        this.practiceSelectedOption = null
        this.practiceUserCode = ''
        this.practiceUserAnswer = ''
        this.practiceSystemDesign = ''
        this.showPracticeHint = false
        
        this.practiceTimer = setInterval(() => {
          this.practiceTime++
        }, 1000)
        
        document.body.style.overflow = 'hidden'
      },
      closePracticeMode() {
        this.practiceMode = false
        clearInterval(this.practiceTimer)
        document.body.style.overflow = 'auto'
      },
      submitPractice() {
        alert('练习答案已提交')
        this.closePracticeMode()
      },
      showPracticeHint() {
        this.showPracticeHint = true
      },
      formatTime(seconds) {
        const mins = Math.floor(seconds / 60)
        const secs = seconds % 60
        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
      }
    },
    mounted() {
      document.title = '专业技术题库+训练 - 面试题题库'
    },
    beforeUnmount() {
      if (this.practiceTimer) {
        clearInterval(this.practiceTimer)
      }
    }
  }
  </script>
  
  <style scoped>
  .technical-questions-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  .header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .header h1 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .header .subtitle {
    font-size: 1.1rem;
    color: #7f8c8d;
  }
  
  .tech-categories {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  
  .tech-category-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid #e0e0e0;
  }
  
  .tech-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .tech-category-card.active {
    border-color: #3498db;
    background: #f0f7ff;
  }
  
  .category-icon {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 1rem;
  }
  
  .tech-category-card h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .tech-category-card p {
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  
  .question-count {
    display: inline-block;
    background: #e0e0e0;
    color: #2c3e50;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
  }
  
  .filter-section {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .search-box {
    position: relative;
    margin-bottom: 1.5rem;
  }
  
  .search-box input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.3s;
  }
  
  .search-box input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  }
  
  .search-box i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #7f8c8d;
  }
  
  .filter-options {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  
  .filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .filter-group label {
    font-weight: 600;
    color: #2c3e50;
  }
  
  .filter-group select {
    padding: 0.6rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
  }
  
  .filter-group select:focus {
    outline: none;
    border-color: #3498db;
  }
  
  .questions-container {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }
  
  .questions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f0f0f0;
  }
  
  .questions-header h2 {
    font-size: 1.5rem;
    color: #2c3e50;
  }
  
  .view-mode {
    display: flex;
    gap: 0.5rem;
  }
  
  .view-mode button {
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
  }
  
  .view-mode button:hover {
    border-color: #3498db;
    color: #3498db;
  }
  
  .view-mode button.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
  }
  
  .questions-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .question-item {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #e0e0e0;
  }
  
  .question-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #3498db;
  }
  
  .question-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .question-type {
    background: #f0f7ff;
    color: #3498db;
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
  }
  
  .question-difficulty {
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
  }
  
  .question-difficulty.easy {
    background: #e8f8f5;
    color: #27ae60;
  }
  
  .question-difficulty.medium {
    background: #fff8e8;
    color: #f39c12;
  }
  
  .question-difficulty.hard {
    background: #fce8e8;
    color: #e74c3c;
  }
  
  .question-title {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 1rem;
  }
  
  .question-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .tag {
    background: #f0f0f0;
    color: #7f8c8d;
    padding: 0.2rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
  }
  
  .question-footer {
    display: flex;
    justify-content: space-between;
    color: #7f8c8d;
    font-size: 0.9rem;
  }
  
  .question-footer i {
    margin-right: 0.3rem;
  }
  
  .questions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
  }
  
  .question-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #e0e0e0;
  }
  
  .question-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #3498db;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  
  .card-footer {
    display: flex;
    justify-content: space-between;
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-top: 1rem;
  }
  
  .card-footer i {
    margin-right: 0.3rem;
  }
  
  .no-results {
    text-align: center;
    padding: 3rem;
    color: #7f8c8d;
  }
  
  .no-results i {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #bdc3c7;
  }
  
  .no-results button {
    margin-top: 1rem;
    padding: 0.6rem 1.2rem;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .no-results button:hover {
    background: #2980b9;
  }
  
  .pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
  }
  
  .pagination button {
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .pagination button:hover {
    border-color: #3498db;
    color: #3498db;
  }
  
  .pagination button.active {
    background: #3498db;
    color: white;
    border-color: #3498db;
  }
  
  /* 模态框样式 */
  .question-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 1rem;
  }
  
  .modal-content {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  .close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #7f8c8d;
    transition: color 0.3s;
  }
  
  .close-btn:hover {
    color: #e74c3c;
  }
  
  .modal-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .modal-header h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin: 1rem 0;
  }
  
  .modal-body {
    margin-top: 1rem;
  }
  
  .question-description {
    margin-bottom: 2rem;
  }
  
  .question-description h3 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 1rem;
  }
  
  .question-description p {
    line-height: 1.8;
    color: #2c3e50;
  }
  
  .question-options {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 1.5rem 0;
  }
  
  .option {
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: flex-start;
  }
  
  .option:hover {
    background: #f5f5f5;
  }
  
  .option.selected {
    background: #f0f7ff;
    border-color: #3498db;
  }
  
  .option.correct {
    background: #e8f8f5;
    border-color: #27ae60;
  }
  
  .option.wrong {
    background: #fce8e8;
    border-color: #e74c3c;
  }
  
  .option-letter {
    font-weight: bold;
    margin-right: 0.8rem;
    color: #2c3e50;
  }
  
  .coding-section {
    margin: 1.5rem 0;
  }
  
  .code-editor {
    position: relative;
    margin-bottom: 1rem;
  }
  
  .code-editor textarea {
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    resize: vertical;
  }
  
  .code-editor select {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
  }
  
  .run-code-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .run-code-btn:hover {
    background: #219653;
  }
  
  .run-code-btn i {
    margin-right: 0.5rem;
  }
  
  .essay-section textarea,
  .system-design-section textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
  }
  
  .design-tools {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .design-tools button {
    padding: 0.5rem 1rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
  }
  
  .whiteboard {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 1rem;
  }
  
  .whiteboard-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .whiteboard-toolbar button {
    padding: 0.3rem 0.6rem;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
  }
  
  .whiteboard canvas {
    width: 100%;
    height: 300px;
    background: white;
  }
  
  .action-buttons {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
  }
  
  .show-answer-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .show-answer-btn:hover {
    background: #2980b9;
  }
  
  .save-btn {
    background: #f39c12;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .save-btn:hover {
    background: #e67e22;
  }
  
  .practice-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .practice-btn:hover {
    background: #219653;
  }
  
  .action-buttons button i {
    margin-right: 0.5rem;
  }
  
  .answer-section {
    background: #f9f9f9;
    padding: 1.5rem;
    border-radius: 6px;
    margin-top: 1.5rem;
  }
  
  .answer-section h3 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 1rem;
  }
  
  .answer-content {
    line-height: 1.8;
    color: #2c3e50;
  }
  
  .sample-code {
    margin-top: 1.5rem;
  }
  
  .sample-code h4 {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .sample-code pre {
    background: #2c3e50;
    color: #f5f5f5;
    padding: 1rem;
    border-radius: 6px;
    overflow-x: auto;
  }
  
  /* 练习模式样式 */
  .practice-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 1rem;
  }
  
  .practice-content {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  .practice-content h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 1rem;
  }
  
  .timer {
    font-size: 1.2rem;
    color: #e74c3c;
    margin-bottom: 1.5rem;
    font-weight: bold;
  }
  
  .timer i {
    margin-right: 0.5rem;
  }
  
  .practice-question {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .practice-answer-area {
    margin: 1.5rem 0;
  }
  
  .practice-options {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  
  .practice-options .option {
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: flex-start;
  }
  
  .practice-options .option:hover {
    background: #f5f5f5;
  }
  
  .practice-options .option.selected {
    background: #f0f7ff;
    border-color: #3498db;
  }
  
  .practice-code-editor {
    position: relative;
  }
  
  .practice-code-editor textarea {
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    resize: vertical;
  }
  
  .practice-code-editor select {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: white;
  }
  
  .practice-essay textarea,
  .practice-system-design textarea {
    width: 100%;
    min-height: 200px;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.9rem;
    resize: vertical;
  }
  
  .practice-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  
  .submit-btn {
    background: #27ae60;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .submit-btn:hover {
    background: #219653;
  }
  
  .hint-btn {
    background: #f39c12;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .hint-btn:hover {
    background: #e67e22;
  }
  
  .practice-actions button i {
    margin-right: 0.5rem;
  }
  
  @media (max-width: 768px) {
    .technical-questions-container {
      padding: 1rem;
    }
    
    .tech-categories {
      grid-template-columns: 1fr;
    }
    
    .filter-options {
      flex-direction: column;
      gap: 1rem;
    }
    
    .filter-group {
      width: 100%;
    }
    
    .filter-group select {
      width: 100%;
    }
    
    .questions-grid {
      grid-template-columns: 1fr;
    }
    
    .modal-content,
    .practice-content {
      padding: 1.5rem;
    }
    
    .action-buttons,
    .practice-actions {
      flex-direction: column;
      gap: 0.5rem;
    }
    
    .action-buttons button,
    .practice-actions button {
      width: 100%;
    }
  }
  </style>
